<template>
  <div>
    <camera-player
      v-if="playVideo"
      :device-id="camera.deviceId"
      height="400px"
      @onStop="playVideo = false"
    />
    <div v-else>
      <el-row v-if="model=='block' || model=='line'" :gutter="5">
        <el-col
          v-for="(item,index) in cameraList"
          :key="index"
          :xs=" 6"
          :sm=" 6"
          :md=" 6"
          :lg="8"
          :xl="6"
        >
          <div style="position: relative">
            <el-image
              style="width:100%;height: 120px"
              :src="item.picturePath"
              :preview-src-list="[item.picturePath]"
              fit="fit"
            />
            <el-button-group style="position: absolute;bottom: 10px;left: 5px">
              <el-button
                type="primary"
                icon="el-icon-picture-outline"
                @click="snap(item)"
              />
              <el-button
                icon="el-icon-video-camera"
                type="primary"
                @click.stop="hls(item)"
              />
            </el-button-group>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-else
        :highlight-current-row="true"
        :data="cameraList"
        :empty-text="$t('not')+$t('camera')"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-button
              type="primary"
              @click.stop="settingWithCam(props.row)"
            >{{ $t('setting') }}
            </el-button>
            <el-button
              type="primary"
              @click.stop="historyImg(props.row)"
            >{{ $t('history') }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column width="100" >
          <template slot-scope="scope">
            <el-image
              style="width:100px;height: 68px;"
              :src="scope.row.picturePath"
              :preview-src-list="[scope.row.picturePath]"
              fit="fit"
            />
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <div>
              <div style="font-size:14px;" class="primary-color">{{ scope.row.name }}</div>
              <div style="font-size:13px;" class="text-gray-400">{{ scope.row.hid }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="140" >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-picture-outline"
              @click="snap(scope.row)"
            >{{ $t('snap') }}
            </el-button>

            <el-button
              style="margin-top: 5px;margin-left: 0px"
              icon="el-icon-video-camera"
              type="primary"
              @click.stop="hls(scope.row)"
            >{{ $t('play') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      append-to-body
      :visible.sync="playVideoWithSetting"
      width="1520px"
      destroy-on-close
      top="5px"
    >
      <el-row :gutter="5" style="width: 100%">
        <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
          <camera-player
            v-if="playVideoWithSetting"
            height="550px"
            type="video"
            :device-id="camera.deviceId"
          />
        </el-col>
        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
          <div class="uni-scroll" style="height: 600px">
            <device-setting :device-core="deviceCore" />
          </div>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog
      append-to-body
      :title="camera.name"
      :visible.sync="dialogSnapVisible"
      width="800px"
    >
      <camera-player v-if="dialogSnapVisible" height="400px" :device-id="camera.deviceId" type="picture" />
    </el-dialog>

  </div>
</template>

<script>
import CameraPlayer from '@/components/CameraPlayer'
import DeviceSetting from '@/components/DeviceSetting'
import { listCameraBind } from '@/api/camera/cameraBindApi'

export default {
  name: 'DeviceCamera',
  components: {
    CameraPlayer,
    DeviceSetting
  },
  props: {
    model: {
      type: String,
      default: 'list'
    },
    deviceCore: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      playTypeList: [],
      playVideo: false,
      playVideoWithSetting: false,
      dialogSnapVisible: false,
      camera: {},
      cameraList: []
    }
  },
  watch: {
    deviceCore: {
      deep: true,
      handler(val) {
        if (val != null) {
          this.listCameraBind()
        }
      }
    }
  },
  created() {
    this.listCameraBind()
  },
  methods: {
    historyImg(item) {
      this.$router.push({
        path: '/camera/img/' + item.deviceId,
        query: { deviceId: item.deviceId, hid: item.deviceCore }
      })
    },
    listCameraBind() {
      if (!this.deviceCore) {
        this.cameraList = []
        return
      }
      listCameraBind({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.cameraList = data
        } else {
          this.cameraList = []
        }
      })
    },
    snap(item) {
      this.camera = item
      this.dialogSnapVisible = true
    },
    settingWithCam(item) {
      this.camera = item
      this.deviceCore = item.deviceCore
      this.playVideoWithSetting = true
    },
    hls(item) {
      this.camera = item
      this.playVideo = true
    }
  }
}
</script>

<style scoped lang="scss">
  @import '@/styles/element-variables.scss';

  .primary-color {
    color: $--color-primary;
  }

</style>
